import React, { useEffect,useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";

// import LoadingOverlay from '../loadingOverLay';


window._AMapSecurityConfig = {
  securityJsCode: "4abe57d50414a8a96adbbf34ae94d8a7",
};

const Map = ({ onSendData,onSendData2 }) => {

  useEffect(() => {
    let amap;

    const initMap = () => {
      window.tt.getLocation({
        //异步操作
        type: "gcj02",
        timeout: 5,
        cacheTimeout: 30,
        accuracy: "best",
        success(res) {
          const { longitude, latitude } = res;
          console.log("当前地理位置信息：", JSON.stringify(res));

          //获取到经纬度之后再执行地图渲染
          AMapLoader.load({
            key: "d26bc7c09da651563065f82a57f5c1bb", // 申请好的Web端开发者Key，首次调用load时必填
            version: "2.0",
            plugins: ["AMap.Geocoder"], // 插件列表
          })
            .then((AMap) => {
              console.log("地图渲染了");
              amap = new AMap.Map("mapContainer", {
                zoom: 15, // 初始化地图层级
                center: [longitude, latitude], // 初始化地图中心点
              });

              //监听地图加载完成的钩子函数
              amap.on('complete', function () {
                console.log('地图加载完成');
                onSendData2(false);
              });

              // 标记
              let marker = new AMap.Marker({
                position: [longitude, latitude], // 基点位置
              });
              // 地图添加标记
              amap.add(marker);
              // 需要转换的经纬度坐标
              // 创建地理编码实例
              const geocoder = new AMap.Geocoder({
                city: "全国", // 城市设为全国，默认会解析附近地址
                radius: 1000, // 范围，默认1000
              });
              // 执行逆地理编码
              geocoder.getAddress(
                [longitude, latitude],
                function (status, result) {
                  if (status === "complete" && result.info === "OK") {
                    // 成功获取地址信息
                    const address = result.regeocode.formattedAddress; // 完整地址
                    const addressComponent = result.regeocode.addressComponent; // 地址组件
                    console.log("完整地址:", address);
                    console.log("地址组件:", addressComponent);
                    // 调用父组件传递的回调函数，并传递数据
                    onSendData(address, longitude, latitude);
                  } else {
                    console.error("逆地理编码失败:", result);
                  }
                }
              );

            })
            .catch((e) => {
              console.log(e);
            });
        },
        fail(res) {
          console.log(`getLocation fail: ${JSON.stringify(res)}`);
        },
      });
    }

    //下面代码不许动
    setTimeout(()=>{//要等jsapi认证过了才能调用这个，否则getLocation获取定位会失败
      initMap();
    },2000)

    return () => {//销毁地图
      if (amap) {
        amap.destroy();
        amap = null;
      }
    };

  }, []);

  return (
    <div style={{width: "100%", height: "100%"}}>
      <div id="mapContainer" style={{ width: "100%", height: "100%" }}></div>
    </div>
  );
};

export default Map;
